/*
 * @Author: yinxiefei
 * @Date: 2021-11-22 10:40:16
 * @Last Modified by: yinxiefei
 * @Last Modified time: 2021-11-22 15:55:23
 */

import { useEffect, useState } from 'react';
import { Button, Dropdown, Menu, Modal, Tooltip } from "antd";
import { CloseOutlined, PlusOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import styles from "./index.less";

interface ITypeSelect {
  title: string;
  tooltip: string;
  dataList: any[];
  onCheck: (item: any) => void;
  disibleIds: number[];
  onDelete: (item: any) => void;
  onChange: (item: any[]) => void;
}

const TypeSelect = ({ title, tooltip, dataList, onCheck, disibleIds, onDelete, onChange }: ITypeSelect) => {
  const [visible, setVisible] = useState(false);
  const [selected, setSelected] = useState<any[]>([]);
  useEffect(() => {
    document.addEventListener('click', () => {
      setVisible(false);
    });
    return () => {
      document.addEventListener('click', () => {
        setVisible(false);
      });
    }
  }, [])
  useEffect(() => {
    onChange(selected);
  }, [selected])
  return (
    <div>
      <div className={styles.actionPanel}>
        <div>
          <span className={styles.titleLabel}>{title}</span>
          <Tooltip placement="topLeft" title={tooltip} arrowPointAtCenter>
            <QuestionCircleOutlined />
          </Tooltip>
        </div>
        <Dropdown trigger={['click']} visible={visible} overlay={
          <Menu>
            {dataList.map(item => (
              <Menu.Item disabled={disibleIds.includes(item.id)} key={item.id} onClick={({ domEvent }) => {
                onCheck(item);
                setSelected(selected.concat(item));
                domEvent.nativeEvent.stopImmediatePropagation();
              }}>
                <a className={styles.menuItem}>
                  {item.text}
                </a>
              </Menu.Item>
            ))}
          </Menu>
        } placement="bottomLeft">
          <Button type='link' onClick={(e) => {
            setVisible(true);
            e.nativeEvent.stopImmediatePropagation();
          }} icon={<PlusOutlined />}>
            添加字段
          </Button>
        </Dropdown>
      </div >
      <div className={styles.itemPanel}>
        {selected.map(item => (
          <div key={item.id} className={styles.tagItem}>
            {item.text}
            <CloseOutlined className={styles.iconBtn} onClick={() => {
              onDelete(item);
              setSelected(selected.filter(n => item.id !== n.id));
            }} />
          </div>
        ))}
      </div>
    </div >
  )
}

interface Props {
  visible: boolean;
  handleOk: (data: any) => void;
  handleCancel: () => void;
}


const AssignmentRules: React.FC<Props> = ({ visible, handleOk, handleCancel }) => {
  const list = [
    {
      text: '单行文本',
      id: 1
    },
    {
      text: '下拉复选框',
      id: 2
    },
    {
      text: '日期时间',
      id: 3
    },
    {
      text: '单选按钮组',
      id: 4
    },
    {
      text: '下拉复选框',
      id: 5
    },
    {
      text: '下拉框',
      id: 6
    },
  ];
  const [dataList, setDataList] = useState(list);
  const [disibleIds, setDisibleIds] = useState([]);
  const [formData, setFormData] = useState<any>({
    setNull: [],
    setOriginally: []
  })
  const initValue = () => {
    setDisibleIds([]);
    setFormData({
      setNull: [],
      setOriginally: []
    });
  }
  return (
    <Modal
      title="特殊字段赋值规则"
      visible={visible}
      onOk={() => {
        handleOk(formData);
        initValue();
      }}
      onCancel={() => {
        handleCancel();
        initValue();
      }}
      maskClosable={false}
      destroyOnClose
    >
      <div style={{ minHeight: 344 }}>
        <div className={styles.dialogLabel}>此处设置的字段，不可见时按照下方对应规则赋值，不受默认赋值规则的影响</div>
        <TypeSelect
          title='保持原值'
          dataList={dataList}
          disibleIds={disibleIds}
          tooltip='不可见字段的原有值保持不变'
          onCheck={(item) => {
            setDisibleIds(disibleIds.concat(item.id));
          }}
          onChange={(items) => {
            setFormData({
              ...formData,
              setOriginally: items
            })
          }}
          onDelete={(item) => {
            setDisibleIds(disibleIds.filter(n => n !== item.id));
          }}
        />
        <div className={styles.splitLine} />
        <TypeSelect
          title='空值'
          disibleIds={disibleIds}
          dataList={dataList}
          tooltip='不可见字段提交为空值'
          onCheck={(item) => {
            setDisibleIds(disibleIds.concat(item.id));
          }}
          onChange={(items) => {
            setFormData({
              ...formData,
              setNull: items
            })
          }}
          onDelete={(item) => {
            setDisibleIds(disibleIds.filter(n => n !== item.id));
          }}
        />
      </div>
    </Modal>
  )
}

export default AssignmentRules;
